<!DOCTYPE HTML>

<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:th="http://www.thymeleaf.org">
<head>
<title>Kukbuk</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

<!-- Bootstrap CSS -->
<link rel="stylesheet" type="text/css"
	href="../../css/bootstrap.min.css" th:href="@{/css/bootstrap.min.css}" />
<link rel="stylesheet" type="text/css" href="../../css/custom.css"
	th:href="@{/css/custom.css}" />
<!-- WYSIWYG HTML5 -->
<link rel="stylesheet" type="text/css"
	href="../../css/bootstrap-wysihtml5.css"
	th:href="@{/css/bootstrap-wysihtml5.css}" />
</head>

<body>
	<!-- Fragments: -->
	<!-- 	- "top-menu" -->
	<!-- 	- "message-boxes" -->
	<!-- 	- "categories" -->
	<!-- 	- "cookbooks" -->
	<!-- 	- "recipes" -->
	<!-- 	- "recipes-large" -->

	<div class="container">
		<!-- TOP MENU -->
		<div class="navbar navbar-fixed-top" th:fragment="top-menu">
			<div class="navbar-inner">
				<div class="container">
					<a class="btn btn-navbar" data-toggle="collapse"
						data-target=".nav-collapse"> <span class="icon-bar"></span> <span
						class="icon-bar"></span> <span class="icon-bar"></span>
					</a> <a class="brand" href="/">Kukbuk</a>
					<div class="nav-collapse">
						<ul class="nav">
							<li><a href="recipe/list.html" th:href="@{/recipe/list}">Przepisy</a></li>
							<li th:unless="${beans.userSession.user}"><a
								href="user/login.html" th:href="@{/login}">Logowanie</a></li>
							<li th:unless="${beans.userSession.user}"><a
								href="user/register.html" th:href="@{/register}">Rejestracja</a>
							</li>
							<li><a href="url/url.html" th:href="@{/shorten}">Skracanie
									URL</a></li>

							<!-- PROFILE (DROPDOWN) -->
							<li id="profile" class="dropdown"
								th:if="${#bools.isTrue(beans.userSession.user) and #bools.isFalse(beans.userSession.isAdmin)}"><a
								class="dropdown-toggle" data-toggle="dropdown" href="#profile">Profil
									<b class="caret"> </b>
							</a>
								<ul class="dropdown-menu">
									<li><a href="user/recipe/list.html"
										th:href="@{'/user/recipe/list'}"> <i class="icon-file"></i>
											Moje przepisy
									</a></li>
									<li><a href="user/cookbook/list.html"
										th:href="@{'/user/cookbook/list'}"> <i class="icon-book"></i>
											Moje książki
									</a></li>
									<li class="divider"></li>
									<li><a href="user/recipe/list.html"
										th:href="@{'/user/recipe/management/list'}"> <i
											class="icon-folder-open"></i> Zarządzaj przepisami
									</a></li>
									<li><a href="user/cookbook/list.html"
										th:href="@{'/user/cookbook/management/list'}"> <i
											class="icon-folder-open"></i> Zarządzaj książkami
									</a></li>
									<li class="divider"></li>
									<li><a href="user/recipe/create.html"
										th:href="@{'/user/recipe/create'}"> <i class="icon-plus"></i>
											Dodaj nowy przepis
									</a></li>
									<li><a href="user/cookbook/create.html"
										th:href="@{'/user/cookbook/create'}"> <i class="icon-plus"></i>
											Dodaj nową książkę
									</a></li>
									<li class="divider"></li>
									<li><a href="user/edit.html" th:href="@{/user/edit}">
											<i class="icon-pencil"></i> Zmień dane
									</a></li>
									<li
										th:if="${#bools.isFalse(beans.userService.isUserIsValidated(beans.userSession.user))}"><a
										href="main.html" th:href="@{/user/verify}"> <i
											class="icon-repeat"></i> Wyślij kod aktywacyjny
									</a></li>
									<li><a href="main.html" th:href="@{/user/logout}"> <i
											class="icon-off"></i> Wyloguj
									</a></li>
								</ul></li>
							<!-- /PROFILE (DROPDOWN) -->

							<!-- ADMIM (DROPDOWN) -->
							<li id="admin" class="dropdown"
								th:if="${#bools.isTrue(beans.userSession.isAdmin)}"><a
								class="dropdown-toggle" data-toggle="dropdown" href="#admin">Administracja
									<b class="caret"> </b>
							</a>
								<ul class="dropdown-menu">
									<li><a href="admin/category/create.html"
										th:href="@{'/admin/category/create'}"> <i
											class="icon-plus"></i> Dodaj kategorię
									</a></li>
									<li><a href="admin/category/remove.html"
										th:href="@{'/admin/category/remove'}"> <i
											class="icon-remove"></i> Usuń kategorię
									</a></li>
									<li class="divider"></li>
									<li><a href="main.html" th:href="@{/user/logout}"> <i
											class="icon-off"></i> Wyloguj
									</a></li>
								</ul></li>
							<!-- /ADMIM (DROPDOWN) -->
						</ul>

						<form class="navbar-search pull-right" th:action="@{/search}"
							th:object="${searchForm}" method="POST">
							<input type="text" th:field="*{query}" placeholder="Szukaj ...."
								class="search-query span2" />
						</form>
					</div>
				</div>
			</div>
		</div>
		<!-- /TOP MENU -->


		<!-- MESSAGE BOXES -->
		<div class="row" th:fragment="message-boxes">
			<!-- SUCCESS BOX -->
			<div class="alert alert-success fade in" th:if="${successMsgs}">
				<a class="close" data-dismiss="alert">×</a>
				<h4 class="alert-heading">Sukces!</h4>
				<ul>
					<li th:each="msg : ${successMsgs}" th:text="${msg}">Success
						message.</li>
				</ul>
			</div>
			<!-- /SUCCESS BOX -->
			<!-- ERROR BOX -->
			<div class="alert alert-error fade in" th:if="${errorMsgs}">
				<a class="close" data-dismiss="alert">×</a>
				<h4 class="alert-heading">Wystąpił błąd!</h4>
				<ul>
					<li th:each="msg : ${errorMsgs}" th:text="${msg}">Error
						message.</li>
				</ul>
			</div>
			<!-- /ERROR BOX -->
			<!-- WARNING BOX -->
			<div class="alert alert-block fade in" th:if="${warnMsgs}">
				<a class="close" data-dismiss="alert">×</a>
				<h4 class="alert-heading">Pojawił się problem!</h4>
				<ul>
					<li th:each="msg : ${warnMsgs}" th:text="${msg}">Warning
						message.</li>
				</ul>
			</div>
			<!-- /ERROR BOX -->
			<!-- INFO BOX -->
			<div class="alert alert-info fade in" th:if="${infoMsgs}">
				<a class="close" data-dismiss="alert">×</a>
				<h4 class="alert-heading">Informacje.</h4>
				<ul>
					<li th:each="msg : ${infoMsgs}" th:text="${msg}">Info message</li>
				</ul>
			</div>
			<!-- /INFO BOX -->
		</div>
		<!-- /MESSAGE BOXES -->


		<!-- CATEGORIES -->
		<div th:fragment="categories" class="row"
			th:if="${#bools.isTrue(categories) and not #lists.isEmpty(categories)}">
			<table class="table">
				<thead>
					<tr>
						<th><h6>Nazwa</h6></th>
						<th><h6>Opis</h6></th>
						<th><h6>Przepisy</h6></th>
						<th><h6>Podkategorie</h6></th>
					</tr>
				</thead>
				<tbody>
					<tr th:each="cat : ${categories}">
						<td><a th:href="@{'/recipe/list/' + ${cat.id}}"> <strong
								th:text="${cat.name}">Nazwa kategorii</strong>
						</a></td>
						<td><em th:text="${cat.description}">Opis kategorii</em></td>
						<td
							th:text="${beans.categoryService.getCategoryRecipeCount(cat.id)}">666</td>
						<td th:text="${beans.categoryService.getSubcategoryCount(cat.id)}">666</td>
					</tr>
				</tbody>
			</table>
		</div>
		<!-- /CATEGORIES -->


		<!-- COOKBOOKS -->
		<div th:fragment="cookbooks" class="row"
			th:if="${#bools.isTrue(cookbooks) and not #lists.isEmpty(cookbooks)}">
			<table class="table">
				<thead>
					<tr>
						<th><h6>Nazwa</h6></th>
						<th><h6>Opis</h6></th>
						<th><h6>Ilość przepisów</h6></th>
					</tr>
				</thead>
				<tbody>
					<tr th:each="book : ${cookbooks}">
						<td><a th:href="@{'/cookbook/' + ${book.id}}"> <strong
								th:text="${book.name}">Nazwa kategorii</strong>
						</a></td>
						<td><em th:text="${book.description}">Opis książki</em></td>
						<td
							th:text="${beans.cookbookService.getCookbookRecipeCount(book.id)}">666</td>
					</tr>
				</tbody>
			</table>
		</div>
		<!-- /COOKBOOKS -->


		<!-- RECIPES -->
		<div th:fragment="recipes" class="row well"
			th:if="${#bools.isTrue(recipes) and not #lists.isEmpty(recipes)}"
			th:each="rec : ${recipes}">
			<!-- Image -->
			<div class="span3">
				<img style="max-width: 210px; max-height: 210px;"
					src="http://images.przepisy.pl/images/276x184_mc_100/11361/Hiszpanski_tapas_Krokiety_z_szynki.jpeg"
					th:src="${rec.imageUrl}"></img>
			</div>

			<!-- Description -->
			<div class="span6 pull-right">
				<!-- Title -->
				<div class="row">
					<a th:href="@{'/recipe/' + ${rec.id}}"> <strong
						th:text="${rec.name}">Surówka z ogórkiem szklarniowym</strong>
					</a>

					<div class="pull-right">
						<a
							th:if="${#bools.isTrue(currentBook) and #bools.isTrue(beans.cookbookService.isUserOwner(user, rec))}"
							th:href="@{'/user/cookbook/deleterecipe/' + ${rec.id} + '/' + ${currentBook.id}}"
							class="btn btn-danger"> <i class="icon-remove icon-white"></i>
							Usuń z książki
						</a> <a th:if="${#bools.isTrue(beans.userSession.isAdmin)}"
							class="btn btn-primary"
							th:href="@{'/admin/recipe/edit/' + ${rec.id}}"> <i
							class="icon-pencil icon-white"></i> Edytuj
						</a> <a th:if="${#bools.isTrue(beans.userSession.isAdmin)}"
							class="btn btn-danger"
							th:href="@{'/admin/recipe/delete/' + ${rec.id}}"> <i
							class="icon-remove icon-white"></i> Usuń
						</a>
					</div>
				</div>

				<!-- Short description -->
				<div class="row">
					<em th:text="${rec.shortDescription}">Ogórka szklarniowego
						umyć, osuszyć i pokroić w paski w skórce. Czerwoną paprykę
						oczyścić, opłukać i pokroić w paski. Por opłukać i pokroić w
						półplasterki. Czosnek obrać i zmiażdżyć.</em>
				</div>
				<br />
				<div class="row">
					<div class="span2">
						<span th:text="${rec.prepareTime}">20</span> <strong>minut</strong>
						dla <span th:text="${rec.servings}">4</span> <strong>osób</strong>
					</div>

					<!-- Rank -->
					<div class="span4 pull-right">
						<div class="row">
							<strong>Autor:</strong> <a
								th:href="@{${beans.userSession.user}? '/user/profile/' + ${rec.author.id} : '#'}">
								<span
								th:text="${beans.userService.getUserByKey(rec.author).login}">Mariusz
									Kowalski</span>
							</a>
						</div>
						<div class="row">
							<strong>Ocena:</strong>
							<div class="span3 pull-right">
								<div class="progress progress-striped active">
									<div class="bar" style="width: 90%;"
										th:style="${'width: ' + rec.votePercent + '%'}"
										th:text="${rec.negativeVoteCount + '/' + rec.positiveVoteCount}">10/90</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<!-- /RECIPES -->


		<!-- RECIPES-LARGE -->
		<div th:fragment="recipes-large" class="row well"
			th:if="${#bools.isTrue(recipes) and not #lists.isEmpty(recipes)}"
			th:each="rec : ${recipes}">
			<!-- Image -->
			<div class="span3">
				<img style="max-width: 210px; max-height: 210px;"
					src="http://images.przepisy.pl/images/276x184_mc_100/11361/Hiszpanski_tapas_Krokiety_z_szynki.jpeg"
					th:src="${rec.imageUrl}"></img>
			</div>

			<!-- Description -->
			<div class="span8 pull-right">
				<!-- Title -->
				<div class="row">
					<a th:href="@{'/recipe/' + ${rec.id}}"> <strong
						th:text="${rec.name}">Surówka z ogórkiem szklarniowym</strong>
					</a>

					<div class="pull-right">
						<a
							th:if="${#bools.isTrue(currentBook) and #bools.isTrue(beans.cookbookService.isUserOwner(user, rec))}"
							th:href="@{'/user/cookbook/deleterecipe/' + ${rec.id} + '/' + ${currentBook.id}}"
							class="btn btn-danger"> <i class="icon-remove icon-white"></i>
							Usuń z książki
						</a> <a th:if="${#bools.isTrue(beans.userSession.isAdmin)}"
							class="btn btn-primary"
							th:href="@{'/admin/recipe/edit/' + ${rec.id}}"> <i
							class="icon-pencil icon-white"></i> Edytuj
						</a> <a th:if="${#bools.isTrue(beans.userSession.isAdmin)}"
							class="btn btn-danger"
							th:href="@{'/admin/recipe/delete/' + ${rec.id}}"> <i
							class="icon-remove icon-white"></i> Usuń
						</a>
					</div>
				</div>

				<!-- Short description -->
				<div class="row">
					<em th:text="${rec.shortDescription}">Ogórka szklarniowego
						umyć, osuszyć i pokroić w paski w skórce. Czerwoną paprykę
						oczyścić, opłukać i pokroić w paski. Por opłukać i pokroić w
						półplasterki. Czosnek obrać i zmiażdżyć.</em>
				</div>
				<br />
				<div class="row">
					<div class="span2">
						<span th:text="${rec.prepareTime}">20</span> <strong>minut</strong>
						dla <span th:text="${rec.servings}">4</span> <strong>osób</strong>
					</div>

					<!-- Rank -->
					<div class="span4 pull-right">
						<div class="row">
							<strong>Autor:</strong> <a
								th:href="@{${beans.userSession.user}? '/user/profile/' + ${rec.author.id} : '#'}">
								<span
								th:text="${beans.userService.getUserByKey(rec.author).login}">Mariusz
									Kowalski</span>
							</a>
						</div>
						<div class="row">
							<strong>Ocena:</strong>
							<div class="span3 pull-right">
								<div class="progress progress-striped active">
									<div class="bar" style="width: 90%;"
										th:style="${'width: ' + rec.votePercent + '%'}"
										th:text="${rec.negativeVoteCount + '/' + rec.positiveVoteCount}">10/90</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<!-- /RECIPES-LARGE -->
	</div>

	<!-- ======================================================== -->
	<!-- Scripts at bottom of page means faster loading times. -->
	<!-- Latest jQuery -->
	<script type="text/javascript"
		src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
	<!-- Bootstrap -->
	<script type="text/javascript" src="../../js/bootstrap.min.js"
		th:src="@{/js/bootstrap.min.js}"></script>
	<!-- Custom -->
	<script type="text/javascript" src="../../../js/custom.js"
		th:src="@{/js/custom.js}"></script>
	<!-- WYSIWYG HTML5 -->
	<script type="text/javascript"
		src="../../../js/wysihtml5-0.3.0_rc2.min.js"
		th:src="@{/js/wysihtml5-0.3.0_rc2.min.js}"></script>
	<script type="text/javascript" src="../../../js/bootstrap-wysihtml5.js"
		th:src="@{/js/bootstrap-wysihtml5.js}"></script>
</body>
</html>